<template>
	<view :style='{display: display,"flex-direction": direction,"flex-wrap":getWrap(wrap,rwrap),"justify-content":getOrDefault(flexMapper,hmode),"align-items":getOrDefault(flexMapper,vmode),"align-content":getOrDefault(flexMapper,wmode)}' class='_rviv'>
		<slot></slot>
	</view>
</template>

<script>
	
	
	function getOrDefault(mapper, value) {
		if (mapper[value] == null)
			return value;
		else return mapper[value];
	}
	
	function getWrap(wrap, rwrap) {
		if (wrap)
			return 'wrap';
		else if (rwrap)
			return 'wrap-reverse';
		else 'nowrap';
	}
	export default {
		name:"rviv",
		props: {
			hmode: {
				type: String,
				default: ''
			},
			vmode: {
				type: String,
				default: ''
			},
			wrap: {
				type: Boolean,
				default: false
			},
			rwrap: {
				type: Boolean,
				default: false
			},
			wmode: {
				type: String,
				default: ''
			}
		},
		data: function() {
			return {
				display: 'flex',
				direction: 'column-reverse',
				layoutConfig : {
					//加载布局之后再显示布局，否则可能会显示布局前的布局
					afterLoadedShow: true,
					//加载布局(Vue)前对应dom元素的样式(当afterLoadedShow为true时生效)
					registerCSS: `
						hiv{display:none;}
						viv{display:none;}
						rhiv{display:none;}
						rviv{display:none;}
						block{display:none;}
						pow{display:none;}
						wiv{display:none;}
						rwiv{display:none;}
					`,
					version: 'V1.11'
				},
				flexMapper : {
					"start": "flex-start",
					"end": "flex-end",
					"center": "center",
					"evenly": "space-evenly",
					"around": "space-around",
					"between": "space-between"
				}
			}
		},
		methods:{
			getOrDefault(mapper, value) {
				if (mapper[value] == null)
					return value;
				else return mapper[value];
			},
			getWrap(wrap, rwrap) {
				if (wrap)
					return 'wrap';
				else if (rwrap)
					return 'wrap-reverse';
				else 'nowrap';
			}
		}
	}
</script>

<style>

</style>
